<!-- 
五大移动端布局
    - 流式布局针对宽度的百分比
    - flex弹性布局针对屏幕的宽度
    - rem针对单位，实现元素宽度、高度等比例缩放
    - bootstrap框架响应式布局，兼容所有媒体设备宽度
    - vw、vh也是针对单位的，用来实现元素宽度、高度等比例缩放


vw/vh适配布局
    - vw（viewport width）、vh（viewport height）
        * 都是相对单位，类比em、rem
        * 通常使用vw足够了，因为vh几乎用不到

    - 参照物是当前视口宽度、或当前视口高度的尺寸
        1vw = 1/100当前视口宽度 = 1%视宽
        1vh = 1/100当前视口高度 = 1%视高
      例如
        当前视口为375px，则1vw=3.75px
        当前视口为414px，则1vw=4.14px

    - vw/vh与rem
        rem需要利用媒体查询判断设备宽度并改变font-size大小，
        而vw/vh可以省略判断与修改操作，且它更是未来发展趋势

    - vw/vh与百分比
        百分比布局是相对于父容器宽度的，
            25% 父容器宽度的1/4
        vw/vh适配布局是相对于当前视口宽度、高度的
            25vw 当前视口宽度的1/4，因为100份中占了25份

    - 直接使用vw或vh单位即可
        换算关系
            选择视口宽度尺寸：例如375px
                1vw = 3.75px
                ?vw = 50px
                ?vw = 50/3.75 = 13.33333vw    // cmd：cal、或 浏览器控制台计算
            元素vw值 = 元素px值 / (1vw表示的px值)
            元素vw值 = 元素px值 / (视口宽度/100)
        设计稿的问题
            美工给的图片是：750px，属于设计稿尺寸，一倍图1.x
            前端开发需要的是：375px，属于视口宽度，二倍图2.x

    - 插件
        【cssrem】
            需要勾上【Cssrem:Vw】开启单位转换功能，然后修改默认视口宽度【Cssrem:Vw Design】
        【px2vw】
            记得修改默认视口宽度

    - 参考案例：浏览器移动端模拟下，输入网址【m.bilibili.com】

注意：
    - 要加meta视口标签，否则vw、vh无效；
    - 单位大小可能有小数，因为计算机中除法是除不尽的，例如；375/10=37.51而不是37.5；414/10=41.44而不是41.4
    - 兼容性：caniuse网站


拓展：
    vmin、vmax本质就是vw、vh单位，只是需要符合特定规则后才被选择出来使用
    vmin
        选择viewport宽度、或高度中，较小的一方，作为vw或vh
            宽度>高度，则 1vmin = 1vh
            宽度<高度，则 1vmin = 1vw
    vmax
        选择viewport宽度、或高度中，较大的一方，作为vw或vh
            宽度>高度，则 1vmax = 1vw
            宽度<高度，则 1vmax = 1vh

 -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>vw/vh适配布局</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            div {
                width: 10vw;
                /* 
                    通常情况下，宽、高统一用vw或vh，二选一即可，
                    因为vw表示宽度，宽度改变时高度也会随之等比例缩放，
                    另外vh基本用不到，用的都是vw。
                */
                /* height: 10vh; */
                height: 10vw;
                background-color: cyan;
            }
            div:nth-child(2) {
                width: 37.5px;
                height: 37.5px;
                background-color: skyblue;
            }
            div:nth-child(3) {
                width: 10vmin;
                height: 10vmin;
                background-color: blue;
            }
            div:nth-child(4) {
                /* 
                设计稿375px，目标元素50px*100px
                    元素vw值 = 元素px值 / (1vw表示的px值)
                    ?vw = 50 / 3.75 = 13.3333vw
                    ?vw = 100 / 3.75 = 26.6667vw
                单位都是vw，宽高可以实现等比例缩放
                 */
                width: 26.6667vw;
                height: 13.3333vw;
                background-color: red;
                font-size: 4.2667vw;
            }
        </style>
    </head>
    <body>
        <div></div>
        <div></div>
        <div></div>
        <div>hello, world</div>
    </body>
</html>
